<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :height="
        listQuery.total > 0 ? 'calc(100vh - 270px)' : 'calc(100vh - 235px)'
      "
    >
      <el-table-column
        align="center"
        :label="$t('common.id')"
        width="50"
        type="index"
      />

      <el-table-column
        width="180px"
        align="center"
        :label="$t('common.preview')"
      >
        <template slot-scope="{ row }">
          <div class="image-slot">
            <template v-if="row.imgURL">
              <el-image
                :src="row.imgURL"
                :preview-src-list="[row.imgURL]"
                fit="fill"
                style="width: 150px; height: 100px"
              >
              </el-image>
            </template>
            <template v-else>
              <el-image>
                <div slot="error">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        min-width="300px"
        align="center"
        :label="$t('email.information')"
      >
        <template slot-scope="{ row }">
          <span>
            <el-tag>{{ row.title }}</el-tag>
            <!-- <el-button style="border:none;" size="mini" @click="handleUpdateTitle(row)" plain><i class="el-icon-edit" /></el-button> -->
          </span>
          <hr style="color: white; border: none" />
          <span>{{ row.updatedAt }}</span>
          <hr style="color: white; border: none" />
          <span>By Users</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col testtttt"
        :label="$t('common.type')"
        min-width="110"
      >
        <template slot-scope="{ row }">
          <template v-for="item in templateList">
            <template v-if="item['key'] == row.type">{{ item.label }}</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        :label="$t('email.attributes')"
        min-width="110"
      >
        <template slot-scope="{ row }">
          <template v-for="item in templateAttributeList">
            <template v-if="item['key'] == row.attribute">{{
              item.label
            }}</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        align="center"
        :label="$t('common.createTime')"
      >
        <template slot-scope="{ row }">
          <span>{{ row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.actions')"
        align="center"
        min-width="250"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            @click="handleEditEdmTemplate(row)"
            type="primary"
            plain
          >
            {{ $t('table.edit') }}
          </el-button>
          <!-- <el-button
              size="mini"
              type="primary"
              @click="handleModifyStatus(row,'published')"
              plain
            >
              克隆
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleModifyStatus(row,'published')"
              plain
            >
              分享
            </el-button> -->
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            plain
            @click="handleDelete(row)"
            >{{ $t('common.delete') }}</el-button
          >
          <!-- <el-button
              size="mini"
              type="warning"
              @click="handleDelete1(row, $index)"
              plain
            >
              预览
            </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>
<script lang="ts">
import storage from '@/utils/storage'
import Pagination from '@/components/Pagination/index.vue'
import { getAction, postAction } from '@/api/common'

export default {
  name: 'TabPane',
  components: {
    Pagination,
  },
  props: {
    type: {
      type: String,
      default: 'CN',
    },
    getListQuery: {
      type: Object,
    },
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 5,
        total: 0,
        title: undefined,
        attribute: undefined,
        type: undefined,
        createdAt: undefined,
      },
      templateList: [
        { label: this.$t('route.emailTemplate'), key: '1' },
        { label: '落地页模板', key: '2' },
        { label: this.$t('email.otherTemplate'), key: '3' },
      ],
      templateAttributeList: [
        { label: this.$t('email.private'), key: '1' },
        { label: this.$t('email.public'), key: '2' },
        { label: this.$t('email.shared'), key: '3' },
      ],
      list: [],
      loading: false,
    }
  },
  created() {
    this.getList()
  },
  watch: {
    getListQuery: {
      deep: true,
      handler(newVal: any) {
        this.listQuery = newVal
      },
    },
  },
  methods: {
    async getList() {
      this.loading = true
      const { data } = await postAction(this.listQuery, 'EmailTemplate/index')
      this.list = data.items
      if (this.list !== null) {
        this.list.forEach((data: any, index: any) => {
          this.list[index].imgURL = this.getCacheImage(data.id)
        })
      }
      this.listQuery.total = data.total
      this.loading = false
    },
    getCacheImage(id: any) {
      const keyName = 'crm_email_template_id_' + id
      return storage.get(keyName)
    },
    async handleDelete(row: any) {
      this.$confirm(this.$t('customer.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      })
        .then(() => {
          getAction({ id: row.id }, 'EmailTemplate/Delete').then((res: any) => {
            if (res.code === 20000) {
              this.$message({
                message: this.$t('common.deleteSuccessfully'),
                type: 'success',
              })
              this.getList()
            } else {
              this.$message({
                message: this.$t('email.deleteFailed'),
                type: 'warning',
              })
            }
          })
        })
        .catch(async () => {
          console.log('catch')
        })
    },
    async handleEditEdmTemplate(row: any) {
      this.$router.push('/email/emailTemplate/edit?id=' + row.id)
    },
    async handleUpdateTitle(row: any) {
      await getAction(
        { id: row.id, title: row.title },
        'EmailTemplate/UpdateTitle'
      )
    },
    // getImage() {
    //   const imgBase64 = this.htmlToImage()
    //   return '<img src=' + imgBase64 + "alt='预览'></img>"
    // }
  },
}
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 155px;
  height: 100px;
  background: #f5f7fa;
  color: #909399;
  font-size: 36px;
}
</style>
